<template>
    <div>
        <ul>
            <li v-for="(item,index) in news" :key="index" >
                <router-link :to="`/home/messages/MessagesDetial/${item.msg_id}`">{{item.msg}}</router-link>
                <button @click="pushlink(item.msg_id)">push</button>
                <button @click="replacelink(item.msg_id)">replace</button>
            </li>
        </ul>
        <button @click="backlink">返回</button>
        <keep-alive>
            <router-view :news="news"></router-view>
        </keep-alive>
    </div>
</template>

<script>
    export default {
        name: "Messages",
        data () {
            return {
                news :[
                    {
                        msg_id:1,
                        msg:'messages1',
                        msg_url:'https://www.baidu.com?id=1'
                    },
                    {
                        msg_id:2,
                        msg:'messages2',
                        msg_url:'https://www.baidu.com?id=2'
                    },
                    {
                        msg_id:4,
                        msg:'messages3',
                        msg_url:'https://www.baidu.com?id=4'
                    }
                ]
            }
        },
        methods:{
            pushlink (id) {
                this.$router.push(`/home/messages/MessagesDetial/${id}`)
            },
            replacelink: function (id) {
                this.$router.replace(`/home/messages/MessagesDetial/${id}`)
            },
            backlink () {
                this.$router.back();
            }
        }
    }
</script>

<style lang="stylus" scoped>

</style>